<template>
	<div class="theme">
		<van-nav-bar :title="$t('ParticipationInstructions.v1')" :left-text="$t('MyDividend.v6')" left-arrow @click-left="onClickLeft" />
		<div class="overlay">
			<div class="overlay-content scrolling bg-overlayColor product-title-color product-title-border-color" style="color: black;">
				<div class="jsImg">
					<div class="bg-overlayColor" style="background: white;padding: 10px;margin-top: 10px;" v-if="list.join">{{$t('ParticipationInstructions.v2')}}</div>
					<div class="bg-overlayColor" style="background: white;padding: 10px;border-top: 1px solid rgba(125, 126, 128,0.1);" v-if="list.join" v-html="list.join">
						内容
					</div>
					<div class="bg-overlayColor" style="background: white;padding: 10px;margin-top: 10px;" v-if="list.rule">{{$t('ParticipationInstructions.v3')}}</div>
					<div class="bg-overlayColor"  style="background: white;padding: 10px;border-top: 1px solid rgba(125, 126, 128,0.1);" v-if="list.rule" v-html="list.rule">
						内容
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { crowdfunding } from './../utils/api';
	let _this;
	export default {
		name: "ParticipationInstructions",
		data() {
			return {
				list: []
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			this.getList();
		},
		methods: {
			getList() {
				crowdfunding.getExplain({
					projectId: this.$route.query.projectId,
					current: this.current,
					size: this.size
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data;
					}
				})
			},
			onClickLeft() {
				this.$router.back(-1);
			}
		}
	}
</script>

<style lang="less" scoped>
	.overlay {
		background: rgb(245, 245, 245);
		margin-top: 45px;
	}
	
	.head {
		background: white;
		color: black;
	}
	
	.head .return:after {
		border-color: black;
	}
	
	/deep/ .jsImg img {
		width: 100%;
		height: 100%;
	}
	
	.van-hairline--bottom::after {
		border: 0;
	}
</style>